<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model='text'>
        <ul>
            <li v-for='(list,index) in updateList' :key='list.id'>
                {{index}}--{{list.name}}--{{list.age}}
            </li>
        </ul>
        <button @click='btnTab=2'>年龄升序</button>
        <button @click='btnTab=3'>年龄降序</button>
        <button @click="btnTab=1">正常排序</button>
    </div>


    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: [{
                        id: 1,
                        name: "tom",
                        age: 13,
                    },
                    {
                        id: 2,
                        name: 'jack',
                        age: 14,
                    },
                    {
                        id: 3,
                        name: 'jerry',
                        age: 17,
                    },
                    {
                        id: 4,
                        name: 'Mike',
                        age: 9,
                    },
                    {
                        id: 5,
                        name: 'jojo',
                        age: 19,
                    },
                    {
                        id: 6,
                        name: 'dio',
                        age: 39,
                    },
                    {
                        id: 7,
                        name: 'tony',
                        age: 29,
                    },
                    {
                        id: 8,
                        name: 'ph',
                        age: 49,
                    },
                ],
                text: '',
                btnTab: 1
            },
            //计算会直接调用拿到返回值
            computed: {
                updateList() {
                    let {
                        list,
                        text,
                        btnTab
                    } = this
                    //筛选符合的数据
                    let updataList = list.filter((item) => {
                        return item.name.indexOf(text) !== -1
                    })

                    //判断点击那个按钮
                    //如果是正常排序则直接返回筛选后的数组
                    if (btnTab === 1) {
                        return updataList
                    }

                    let newList = updataList.sort((item, nextitem) => {
                        // console.log(item.age, nextitem.age) 
                        return btnTab === 2 ? item.age - nextitem.age : nextitem.age - item.age
                    })

                    return newList
                }
            }
        })
    </script>
</body>

</html>